<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>

    <!-- 引入bootstrao框架文件 css文件自己引入字体 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

    <!-- 动画库 -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 css文件就用css的引入方式 -->
    <link rel="stylesheet" href="./assets/css/reset.css">

    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css">

    <!-- 引入index的单独css 样式 less 与css选其一-->
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet/less" href="./assets/css/index.less">

</head>

<body>

    <!-- 头部 -->
    <!-- <div class="fluid"> -->
    <div class="header">
        <header>
            <nav class="navbar navbar-inverse">
                <div class="container">
                    <!-- logo部分 -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand logo wow fadeInDown" href="#home">spirit</a>
                    </div>

                    <!-- 导航栏 -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right list">
                            <li><a href="#home" class="wow fadeInDown" data-wow-delay="0ms">HOME</a></li>
                            <li><a href="#about" class="wow fadeInDown" data-wow-delay="100ms">About</a></li>
                            <li><a href="#team" class="wow fadeInDown " data-wow-delay="200ms">SERVICES</a></li>
                            <li><a href="#portfolio" class="wow fadeInDown" data-wow-delay="300ms">portfolio</a></li>
                            <li><a href="#some" class="wow fadeInDown" data-wow-delay="400ms">testimonials</a></li>
                            <li><a href="#con" class="wow fadeInDown" data-wow-delay="500ms">CONTACT</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

    </div>
    <!-- </div> -->

    <!-- banner -->
    <div class="banner" id="home">
        <div class="container">
            <!-- 标题 -->
            <div class="title">
                <span class="wow fadeInDown" data-wow-delay="200ms">wECOME on</span>
                <span class="wow fadeInDown" data-wow-delay="300ms">spirit8</span>
            </div>

            <!-- 描述 -->
            <div class="info">
                <span class="wow fadeInDown" data-wow-delay="700ms">We are a digital agency with</span>
                <span class="wow fadeInDown" data-wow-delay="800ms">years of experience</span>
                <span class="wow fadeInDown" data-wow-delay="700ms">and with</span>
                <span class="wow fadeInDown" data-wow-delay="800ms">extraordinary people</span>
            </div>

            <!-- 按钮 -->
            <a href="javascript:;" class="more wow fadeInDown" data-wow-delay="1000ms">↓</a>

        </div>
    </div>

    <!-- about -->
    <div class="about" id="about">
        <!-- bootstrap 居中 -->
        <div class="container">
            <!-- 左边图片 -->
            <div class="left" class="more wow fadeInDown">
                <img src="./assets/images/mac.png" alt="">
            </div>

            <!-- 右边内容 -->
            <div class="right">
                <!-- 标题 -->
                <div class="title">
                    <div class="short wow fadeInDown" data-wow-delay="100ms">About us</div>
                    <div class="long wow fadeInDown" data-wow-delay="400ms">
                        <span>Some</span>
                        words
                        <span>about us</span>
                    </div>
                </div>

                <!-- 内容 -->
                <div class="info wow fadeInDown" data-wow-delay="600ms">
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand companies in a way they will never forget.
                </div>

                <!-- 列表 -->
                <ul class="lis">
                    <li class="wow fadeInDown" data-wow-delay="700ms">
                        <span>Mission-</span>
                        We deliver uniqueness and quality
                    </li>
                    <li class="wow fadeInDown" data-wow-delay="800ms">
                        <span>Skills - </span>
                        Delivering fast and excellent results
                    </li>
                    <li class="wow fadeInDown" data-wow-delay="900ms">
                        <span>Clients-</span>
                        Satisfied clients thanks to our experience
                    </li>
                </ul>

                <!-- 按钮 -->
                <a href="javascript:;" class="btn wow fadeInDown" data-wow-delay="800ms">
                    <span class="glyphicon glyphicon-lock"></span>
                    <span>Browse our work</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 团队部分 -->
    <div class="team" id="team">
        <div class="container">
            <!-- 标题 -->
            <div class="title wow fadeInDown" data-wow-delay="300ms">
                <span>MEET</span>
                <span>our team</span>
            </div>

            <!-- 列表 -->
            <div class="list">
                <div class="item">
                    <!-- 背景图片 -->
                    <div class="bimg wow fadeInDown" data-wow-delay="400ms">
                        <img src="./assets/images/cover.jpg" alt="">
                    </div>
                    <!-- 文字部分 -->
                    <div class="content wow fadeInDown" data-wow-delay="300ms">
                        <div class="jason">Jason Statham</div>
                        <div class="knife">Knife designer</div>
                        <div class="do">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>

                <div class="item">
                    <!-- 背景图片 -->
                    <div class="bimg wow fadeInDown" data-wow-delay="500ms">
                        <img src="./assets/images/cover.jpg" alt="">
                    </div>
                    <!-- 文字部分 -->
                    <div class="content wow fadeInDown" data-wow-delay="400ms">
                        <div class="jason">Jason Statham</div>
                        <div class="knife">Knife designer</div>
                        <div class="do">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <!-- 背景图片 -->
                    <div class="bimg wow fadeInDown" data-wow-delay="600ms">
                        <img src="./assets/images/cover.jpg" alt="">
                    </div>
                    <!-- 文字部分 -->
                    <div class="content wow fadeInDown" data-wow-delay="500ms">
                        <div class="jason">Jason Statham</div>
                        <div class="knife">Knife designer</div>
                        <div class="do">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <!-- 背景图片 -->
                    <div class="bimg wow fadeInDown" data-wow-delay="700">
                        <img src="./assets/images/cover.jpg" alt="">
                    </div>
                    <!-- 文字部分 -->
                    <div class="content wow fadeInDown" data-wow-delay="600ms">
                        <div class="jason">Jason Statham</div>
                        <div class="knife">Knife designer</div>
                        <div class="do">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>

            </div>
            <!-- 按钮 -->
            <div class="span wow fadeInDown" data-wow-delay="700ms">
                <label for=""></label>
                <label for=""></label>
                <label for=""></label>
            </div>
        </div>
    </div>

    <!-- take a look -->
    <div class="take" id="portfolio">
        <div class="container">
            <!-- 标题 -->
            <div class="titles wow fadeInDown" data-wow-delay="400ms">
                <span>take a look at</span>
                our services
            </div>
            <!-- 文字 -->
            <p class="lorem wow fadeInDown" data-wow-delay="500ms">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular
                during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
                in section 1.10.32.
            </p>

            <!-- 四个图片部分 -->
            <div class="takes">
                <!-- 第一 -->
                <div class="picture">
                    <div class="ptu wow fadeInDown" data-wow-delay="400ms">
                        <img src="./assets/images/agy1.png" alt="">
                    </div>
                    <div class="all wow fadeInDown" data-wow-delay="500ms">
                        <p class="web">Web design </p>
                        <p class="line">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", </p>
                    </div>
                </div>
                <!-- 第一 -->
                <div class="picture">
                    <div class="ptu wow fadeInDown" data-wow-delay="500ms">
                        <img src="./assets/images/ay2.png" alt="">
                    </div>
                    <div class="all wow fadeInDown" data-wow-delay="600ms">
                        <p class="web">Web design </p>
                        <p class="line">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", </p>
                    </div>
                </div>

                <!-- 第一 -->
                <div class="picture">
                    <div class="ptu wow fadeInDown" data-wow-delay="600ms">
                        <img src="./assets/images/ay3.png" alt="">
                    </div>
                    <div class="all wow fadeInDown" data-wow-delay="700ms">
                        <p class="web">Web design </p>
                        <p class="line">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", </p>
                    </div>
                </div>

                <!-- 第一 -->
                <div class="picture">
                    <div class="ptu wow fadeInDown" data-wow-delay="700ms">
                        <img src="./assets/images/ay4.png" alt="">
                    </div>
                    <div class="all wow fadeInDown" data-wow-delay="800ms">
                        <p class="web">Web design </p>
                        <p class="line">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- some部分 -->
    <div class="some" id="some">
        <div class="container">
            <!-- 标题 -->
            <div class="someof wow fadeInDown" data-wow-delay="400ms">SOME OF <span> OUR CLIENTS</span></div>
            <p class="channel wow fadeInDown" data-wow-delay="600ms">chanel zara guerlain lancome lacoste</p>
            <!-- 按钮 -->
            <div class="span wow fadeInDown">
                <label for=""></label>
                <label for=""></label>
                <label for=""></label>
            </div>
        </div>
    </div>
    <!-- 工作部分 -->
    <div class="container">
        <div class="word">
            <!-- 标题 -->
            <div class="title wow fadeInDown" data-wow-delay="400ms">
                <span>take a look</span>
                <span>at our work</span>
            </div>

            <!-- 文本部分 -->
            <div class="book wow fadeInDown" data-wow-delay="600ms">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
                (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
                ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
                amet..", comes from a line in section 1.10.32.</div>
        </div>
    </div>


    <!-- 大盒子部分 -->
    <div class="container">
        <div class="big">
            <!-- 导航部分 -->
            <div class="navs wow fadeInDown" data-wow-delay="600ms">
                <div class="left">Filter by type</div>
                <div class="right">
                    <a href="javascript:;">All</a>

                    <a href="javascript:;">Web design</a>

                    <a href="javascript:;">Mobile design</a>

                    <a href="javascript:;">Photograpy</a>
                </div>
                <!-- 表单 -->
                <select name="" id="option">
                    <option value="">All</option>
                    <option value="">Web design</option>
                    <option value="">Mobile design</option>
                    <option value="">Photograpy</option>
                </select>
            </div>

            <!-- 图片部分 -->
            <div class="much wow fadeInDown" data-wow-delay="700ms">
                <div class="back">
                    <img src="./assets/images/work-img1.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img1.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img1.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>
                <div class="back">
                    <img src="./assets/images/work-img1.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img2.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img2.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img2.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img2.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img3.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>

                <div class="back">
                    <img src="./assets/images/work-img3.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>


                <div class="back">
                    <img src="./assets/images/work-img3.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>


                <div class="back">
                    <img src="./assets/images/work-img3.png" alt="">
                    <!-- 阴影 -->
                    <div class="item">
                        <div class="title">
                            <div class="long">
                                Trend and fashion
                            </div>
                            <div class="short">
                                Website design
                            </div>
                        </div>
                        <div class="off">+</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- clients -->
    <div class="clients">
        <div class="container">
            <div class="word">
                <!-- 标题 -->
                <div class="title wow fadeInDown" data-wow-delay="200ms">
                    <span id="water">our clients’</span>
                    <span>testimonials</span>
                </div>

                <!-- 文本部分 -->
                <div class="text wow fadeInDown" data-wow-delay="400ms">
                    <p> This book is a treatise on the theory of ethics, very popular during the Renaissance. The first
                        line
                        of
                        Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </p>
                    <p>Dean Martin,<span> CEO Acme Inc.</span></p>
                </div>


            </div>
            <!-- 按钮 -->
            <div class="span wow fadeInDown" data-wow-delay="400ms">
                <label for=""></label>
                <label for=""></label>
                <label for=""></label>
            </div>
        </div>
    </div>


    <!-- contact 部分 -->
    <div class="contact" id="con">
        <div class="container">
            <div class="ours">
                <div class="feel">
                    <!-- 标题 -->
                    <div class="head wow fadeInDown" data-wow-delay="300ms">
                        <span>feel free to</span>
                        <span>contact us</span>
                    </div>


                    <!-- 文字 -->
                    <p class="wow fadeInDown" data-wow-delay="400ms">
                        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
                        Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
                        ethics, very popular during the Renaissance.
                    </p>
                </div>

                <!-- 表单 -->
                <form action="">
                    <!-- 上面 -->
                    <div class="tall wow fadeInDown" data-wow-delay="400ms">
                        <div class="left">
                            <span>Name <sup>*</sup></span>

                            <input type="text" name="" id="" class="info" placeholder="请输入名称">
                        </div>
                        <div class="right">
                            <span>Email Address <sup>*</sup></span>

                            <input type="text" name="" id="" class="info" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <!-- 下面 -->
                    <div class="btn2 wow fadeInDown" data-wow-delay="600ms">
                        <span>Message <sup>*</sup></span>
                        <textarea name="" id="" cols="30" class="textarea" rows="10" placeholder="请输入内容"></textarea>
                    </div>


                </form>
                <!-- 按钮 -->
                <div class="list wow fadeInDown" data-wow-delay="700ms">
                    <button type="submit" class="send">SEND</button>
                </div>
            </div>


        </div>
    </div>



    <!-- 尾部 -->
    <footer>
        <div class="container">
            <div class="boxs">
                <div class="foot2 wow fadeInDown" data-wow-delay="400ms">
                    ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8
                </div>

                <!-- logo -->
                <div class="foot3 wow fadeInDown" data-wow-delay="600ms">
                    <a href="javascript:;">
                        <img src="./assets/images/footer1.png" alt="">
                    </a>

                    <a href="javascript:;">
                        <img src="./assets/images/footer2.png" alt="">
                    </a>

                    <a href="javascript:;">
                        <img src="./assets/images/footer3.png" alt="">
                    </a>

                    <a href="javascript:;">
                        <img src="./assets/images/footer4.png" alt="">
                    </a>

                    <a href="javascript:;">
                        <img src="./assets/images/footer5.png" alt="">
                    </a>

                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <a id="back" href="#home">
        <img src="./assets/images/top.svg" />
    </a>

</body>

</html>
<!-- 引入bootstrap 依赖的 jquery文件 -->
<script src="./assets/js/jquare.js"></script>

<!-- 引入bootstrap框架的脚本文件 -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入less编译器 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入wow.js懒加载效果 -->
<script src="./assets/js/wow.min.js"></script>
<!-- <script src="./assets/js/reset.js"></script> -->

<script>
    // wow.js 插件的初始化
    new WOW().init();
</script>


<script>
    // wow.js 插件的初始化
    new WOW().init();

    //给页面绑定一个滚动条事件
    $(document).scroll(function () {
        //获取到当前滚动条滚动的位置
        var distance = $(this).scrollTop()

        //当位置 > 200 就显示 返回顶部，小于200 就显示
        if (distance >= 200) {
            //显示返回顶部
            $("#back").css({
                transform: 'scale(1)',
                opacity: 1
            });

        } else {
            //不显示
            $("#back").css({
                transform: 'scale(0)',
                opacity: 0
            });
        }
    })
</script>